﻿@model IEnumerable<Shumei.EFCore.Model.Course>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @*@Scripts.Render("~/Scripts/js/jquery.min.js")
    @Scripts.Render("~/Scripts/js/jquery-filterizr.js")*@
   
    <title></title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .nav1 {
            width: 1000px;
            margin: 0 auto 20px;
            text-align: center;
            font-size: 0;
        }

            .nav1 li {
                display: inline-block;
                margin: 0 5px;
                padding: 10px 20px;
                font-size: 14px;
                color: #333;
                background-color: #ccc;
                cursor: pointer;
            }

            .nav1 .active {
                color: #fff;
                background-color: #21b384;
            }

        .jq22 {
            width: 1000px;
            margin: 0 auto;
            font-size: 0;
        }

        .filtr-item {
            display: inline-block;
            width: 230px;
            padding: 10px;
        }

            .filtr-item img {
                width: 100%;
            }
            .filtr-item span {
                display: block;
                margin-top: 5px;
                font-size: 12px;
                text-align: center;
            }
    </style>
    
</head>

<body>
    <h1>单选</h1>

    <ul class="nav1">
        <li class="active" data-filter="all">全部</li>
        <li data-filter="1">动漫</li>
        <li data-filter="2">摄影</li>
        <li data-filter="3">游戏</li>
        <li data-filter="4">美术</li>
        <li data-filter="5">其他</li>
    </ul>



    <div class="jq22">
        @{
            foreach(var m in Model)
            {
                <div class="filtr-item" data-category="1, 5">
                <a href="@Url.Action("Course","Course",new {CourseId=m.Id})">
                    <img src="@Url.Content(m.CourseIcon)" alt="">
                    <span class="ss"> @m.Name </span>
                </a>
                </div>
            }
            
        }
    </div>  

    




















    <style>
        body {
            margin: 0;
            border-left: 200px solid #ccc;
        }

        h1 {
            margin: 40px auto;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }

        .menu {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            padding-top: 100px;
            font-family: Consolas,arial,"宋体";
            background-color: #ccc;
            overflow-y: auto;
        }

            .menu a {
                display: block;
                height: 40px;
                margin: 0 0 1px 2px;
                padding-left: 10px;
                line-height: 40px;
                font-size: 14px;
                color: #333;
                text-decoration: none;
            }

                .menu a:hover {
                    background-color: #eee;
                }

            .menu .cur {
                color: #000;
                background-color: #fff !important;
            }

        .vad {
            margin: 50px 0 10px;
            font-family: Consolas,arial,宋体,sans-serif;
            text-align: center;
        }

            .vad a {
                display: inline-block;
                height: 36px;
                line-height: 36px;
                margin: 0 5px;
                padding: 0 50px;
                font-size: 14px;
                text-align: center;
                color: #eee;
                text-decoration: none;
                background-color: #222;
            }

                .vad a:hover {
                    color: #fff;
                    background-color: #000;
                }

        .thead {
            width: 728px;
            height: 90px;
            margin: 0 auto;
            border-bottom: 40px solid transparent;
        }

        .code {
            position: relative;
            margin-top: 100px;
            padding-top: 41px;
        }

            .code h3 {
                position: absolute;
                top: 0;
                z-index: 10;
                width: 100px;
                height: 40px;
                font: 16px/40px "Microsoft Yahei";
                text-align: center;
                cursor: pointer;
            }

            .code .cur {
                border: 1px solid #f0f0f0;
                border-bottom: 1px solid #f8f8f8;
                background-color: #f8f8f8;
            }

            .code .h31 {
                left: 0;
            }

            .code .h32 {
                left: 102px;
            }

            .code .h33 {
                left: 204px;
            }

            .code .h34 {
                left: 306px;
            }

            .code ol {
                padding: 0;
            }

        .code {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        pre {
            padding: 15px 0;
            border: 1px solid #f0f0f0;
            background-color: #f8f8f8;
        }

        .f-dn {
            display: none;
        }
    </style>



    <div class="menu">
        <a href="~/Course/CourseAll">1、普通</a>
        <a href="~/Course/CourseAll_Sort">2、排序</a>
        <a href="~/Course/CourseAll_Search">3、搜索</a>
    </div>

    @Scripts.Render("~/Scripts/js/jquery.min.js")
    @Scripts.Render("~/Scripts/js/jquery-filterizr.js")
    <script>
        $(function () {
            $('.jq22').filterizr();

            $('.nav1 li').on('click', function () {
                $(this).toggleClass('active').siblings().removeClass('active');
            });
        });
    </script>
</body>
</html>